<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分院管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <style>
        tr {
            vertical-align: middle;
            text-align: center;
        }

        .alert_ {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container mt-5">
        <h3>分院管理</h3>
        <hr>
        <div class="mb-3">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary addbtn" data-bs-toggle="modal" data-bs-target="#exampleModal">
                新增分院
            </button>

            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">新增分院信息</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" aria-label="Sizing example input"
                                    aria-describedby="inputGroup-sizing-default" id="inpname" placeholder="分院名称...">
                            </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" aria-label="Sizing example input"
                                    aria-describedby="inputGroup-sizing-default" id="inpaddress" placeholder="分院地址...">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary savebtn" data-bs-dismiss="modal"> 确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
        </div>
        <div class="alert alert-danger alert_" role="alert">
            该分院已存在，请重新进行输入！
        </div>
        <div>
            <table class="table table-bordered">
                <thead id="thead_">
                    <tr>
                        <th scope="col">分院Id</th>
                        <th scope="col">分院名称</th>
                        <th scope="col">地址</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody class="branch-list">
                    <tr>
                        <td scope="col">id</td>
                        <td scope="col">名称</td>
                        <td scope="col">地址111111111111111111111</td>
                        <td scope="col">
                            <button type="button" class="btn btn-primary">编辑</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        let status = 'add';
        let updateId = null;
        select();
        // 置空输入框
        $('.addbtn').click(() => {
            $('#inpname').val('')
            $('#inpaddress').val('')
            status = 'add'
        })
        // 新增分院
        $('.savebtn').click(() => {
            if ($('#inpname').val() == '' || $('#inpaddress').val() == '') {
                $('.alert_').text('信息不能为空！').slideDown();
                setTimeout(() => {
                    $('.alert_').slideUp();
                }, 2000)
            } else {
                if (status == 'add') {
                    add();
                } else if (status == 'update') {
                    update()
                }
            }
        })
        // 新增请求
        function add() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/branch/add',
                data: {
                    "name": $('#inpname').val(),
                    "address": $('#inpaddress').val(),
                },
                success: function (data) {
                    if (data.code == 0) {
                        select();
                    } else {
                        alert(data.msg)
                    }
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        // 编辑请求
        function update() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/branch/update',
                data: {
                    id: updateId,
                    name: $('#inpname').val(),
                    address: $('#inpaddress').val()
                },
                success: function (data) {
                    if (data.code == 0) {
                        select();
                    } else {
                        alert(data.msg)
                    }
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        // 编辑按钮
        $('.branch-list').on('click', 'button:contains(编辑)', function () {
            let el = JSON.parse($(this).attr('el'));
            $('#inpname').val(el.name);
            $('#inpaddress').val(el.address);
            status = 'update';
            updateId = el.id;
        })
        // 删除
        $('.branch-list').on('click', 'button:contains(删除)', function () {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/branch/del',
                data:
                    { id: $(this)[0].getAttribute('idx') },
                success: function (data) {
                    select();
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        })
        // 查询所有数据
        function select() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/branch/select',
                success: function (data) {
                    render(data.data)
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        // 渲染
        function render(data) {
            let str = ''
            data.forEach((item, index) => {
                str += `<tr>
                        <td scope="col">${item.id}</td>
                        <td scope="col">${item.name}</td>
                        <td scope="col">${item.address}</td>
                        <td>
                            <button   data-bs-toggle="modal" data-bs-target="#exampleModal"  type="button" class="btn btn-primary" el="${JSON.stringify(item).replace(/"/g, '&quot;')}" >编辑</button>
                            <button type="button" class="btn btn-danger" idx="${item.id}">删除</button>
                        </td>
                    </tr>
                `;
            })
            $('.branch-list').html(str)
        }

    </script>
</body>

</html>